<template>
<<<<<<< HEAD
  <div class="home-container">
    <el-button type="info" @click="logout">退出</el-button>
  </div>
</template>

<script>
export default {
  name: 'myHome',
=======
  <el-container class="home-container">
    <!-- 头部 -->
    <el-header>
      <div class="left">
        <img src="../assets/leftlogo.jpg" alt="">
        <span>后台管理系统</span>
      </div>
      <el-button type="info" @click="logout">退出</el-button>
    </el-header>
    <!-- 页面主体 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse? '63px' : '200px'">
        <div class="toggle" @click="toggleCollapse">
          <i class="el-icon-more-outline"></i>
        </div>
        <!-- 垂直导航栏包裹标签：el-menu。
          unique-opened控制是否允许多个二级菜单同时存在，默认为false：允许。
          直接传true控制台报错说这是一个字符串，故使用js逻辑运算传回true。
          传回布尔值也可以v-bind绑定属性后直接返回'true'或'false'。
          为menu组件开启组件库预先封装好的vue-route路由模式，
          该属性需要一个布尔值，true：开启；false：关闭。开启后点击菜单会跳转到index属性值对应的路径
          当布尔属性值为真时，可以简写为属性名，不用使用v-bind绑定后再返回布尔值。
          -->
        <el-menu
          background-color="#323744"
          text-color="#fff"
          active-text-color="#ffd04b"
          :unique-opened="!0"
          :collapse="isCollapse"
          :collapse-transition='false'
          :default-active="actPath"
          router>

          <!-- 一级导航栏。
            禁用导航栏要设置disabled属性。
            v-for循环渲染一级导航菜单。
            动态设置index防止点一个一级菜单全部一级菜单都开启下拉。
            index需要一个string类型值，id为整型数，所以需要给id后面加空字符串隐式转换为字符串类型 -->
          <el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">
            <template slot="title">
              <!-- 一级导航栏图标 -->
              <i :class="'iconfont ' + iconClass[item.id]"></i>
              <!-- 一级导航栏标题 -->
              <!-- 使用v-for循环的数据渲染一级导航标题 -->
              <span>{{item.authName}}</span>
            </template>

            <!-- 一级导航栏中的二级导航栏。
              同样使用v-for循环渲染menuList中的菜单数据。
              结合一级菜单的v-for可以理解为这两个v-for是循环嵌套。
              也需要设置key和index属性，key为v-for硬性要求。
              index为防止点一个菜单多个菜单同时下拉（如果有三级菜单的话）。
              一级菜单开启路由属性后的跳转地址为二级菜单的index属性，
              故修改二级菜单的index属性为请求返回值中的path属性。
              同时一级菜单存在default-active属性用于控制高亮，它的值是二级菜单的index属性，
              故调用点击事件将index传入会话存储中，在data中声明一个变量接收会话存储中的actPath的值，
              并给一级菜单中的default-active属性动态绑定data中的actPath值  -->
            <el-menu-item
              :index="'/' + subitem.path"
              v-for="subitem in item.children"
              :key="subitem.id"
              @click="setActPath('/' + subitem.path)">
              <i class="el-icon-menu"></i>
              <span>{{subitem.authName}}</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <!-- 右边主体 -->
      <el-main>
        <!-- 路由占位符，home中的子路由对应的组件将展示在这里 -->
        <router-view></router-view>
      </el-main>
    </el-container>

  </el-container>
</template>

<script>
import { getMenuList } from '@/api/menuListApi.js'
export default {
  name: 'myHome',
  created () {
    // 页面创建后获取侧边栏数据
    this.getMenus()
    // 页面创建后将临时存储中的路径数据传给data中的actPath属性，该属性绑定在二级菜单的default-active属性上，
    // 用于控制哪个二级菜单该被高亮
    this.actPath = window.sessionStorage.getItem('actPath')
  },
  data () {
    return {
      menuList: [],
      // 一级菜单id-图标映射类
      iconClass: {
        125: 'icon-users',
        103: 'icon-tijikongjian',
        101: 'icon-shangpin',
        102: 'icon-danju',
        145: 'icon-baobiao'
      },
      isCollapse: false,
      actPath: ''
    }
  },
>>>>>>> final
  methods: {
    logout () {
      window.sessionStorage.removeItem('token')
      this.$router.push('/login')
<<<<<<< HEAD
    }
  }
=======
    },
    async getMenus () {
      const { data: res } = await getMenuList()
      // 接口返回状态不是200说明发生了错误，尝试查找meta中的msg属性，如果找不到msg则返回字符串：未知错误
      if (res.meta.status !== 200) {
        return this.$notify.error({
          title: '错误发生了捏',
          message: '刚在存token,请刷新界面'
        })
      }

      // 接口返回的数据由nemuList接收
      this.menuList = res.data
      // console.log(this.menuList)
    },

    // 折叠按钮点击事件调用该方法
    toggleCollapse () {
      this.isCollapse = !this.isCollapse
    },

    // 二级菜单单击事件函数
    setActPath (pathFromIndex) {
      // 在会话存储中保存传来的path，该path是点击二级菜单时调用setActPath函数传入的来自当前二级菜单的index属性值
      window.sessionStorage.setItem('actPath', pathFromIndex)
      // 由于一级菜单中的default-active属性绑定了data中的变量actPath，所以需要将index属性值传一份给data中的actPath
      // 这表示当用户点击某个二级菜单时，该二级菜单的index（path）值将会存储到会话存储中，
      // 同时一级菜单的default-active属性会被修改为当前点击的二级菜单的index值
      this.actPath = window.sessionStorage.getItem('actPath')
    }
  }

>>>>>>> final
}
</script>

<style lang="less" scoped>
<<<<<<< HEAD

=======
  .home-container {
    // f12检查发现home-container的高度会影响其子元素高度，故为它设置高度为100%
    height: 100%;
  }
  .el-header {
    // 设置弹性盒子配合justify-content：space-between来实现div和el-button居左居右
    display: flex;
    justify-content: space-between;
    // 右侧按钮垂直居中
    align-items: center;
    background-color: #323744;
    // 取消el-header默认的左内边距
    padding-left: 0;
    // 左盒子设置弹性盒子配合align-items:center实现标题垂直居中
    .left {
      display: flex;
      align-items: center;
      color: #fff;
      span {
        font-size: 22px;
        padding: 0 12px;
      }
      img {
        width: 5%;
      }
    }
  }
  .el-aside {
    background-color: #323744;
    > div {
      font-family: 'icomoon';
    }
    .toggle {
      color: white;
      text-align: center;
      > i {
        font-size: 22px;
        line-height: 30px;
        transition: .3s;
        cursor: pointer;
      }
      > i:hover {
        transform: rotate(90deg);
      }
    }
    transition: .3s;
  }
  .el-main {
    background-color: #fffaf3;
  }
  // 网页检查发现iconfont控制了字体图标的font-size，进行修改使它变大一点
  .iconfont {
    font-size: 20px;
    // 添加右外边距设置和一级菜单标题的间距
    margin-right: 12px;
  }
  // 取消menu盒子右侧边框使得aside盒子所有的子组件宽度相同
  .el-menu {
    border-right: none;
    transition: .3s;
  }
>>>>>>> final
</style>
